{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/shop.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>套餐列表</p>
            </div>
        </div>
    </div>
</header>
<!-- g购物列表 -->
<div class="shoplist normalBox">
    <div class="container shopwrap">
        <form class="form-inline" action="{:url('/home/Shop/index')}" method="post">
            <div class="form-group">
                <div class="inlinebox">
                    <label for="mno">运营商：</label>
                    <select id="mno" name="globalsimtype" class="form-control">
                        <option value="">请选择</option>
                        <option value="0" {if condition="$param['globalsimtype'] eq '0'"} selected {/if} >中国联通</option>
                        <option value="1" {if condition="$param['globalsimtype'] eq '1'"} selected {/if} >中国移动</option>
                        <option value="2" {if condition="$param['globalsimtype'] eq '2'"} selected {/if} >中国电信</option>
                    </select>
                    <span class="caret"></span>
                </div>
                <div class="inlinebox mts">
                    <label for="spec">规格：</label>
                    <input id="spec" type="text" name="total" value="{$param.total|trim}" class="form-control spec" placeholder="套餐规格"/>
                </div>

                <button class="btn searchbtn" type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                    搜索
                </button>
            </div>
        </form>
        <ul class="listwrap">
            {volist name="shop.data" id="sp"}
            <li>
                <a href="{:url('/home/Shop/details',['id'=>$sp['id']])}">
                    <img class="img-responsive" src="{$sp.icon}" alt=""/>
                    <div class="rightbox">
                        <p><span>{$sp.total}/{$sp.pkg_kind}</span><span>￥{$sp.pkg_price}</span></p>
                    </div>
                </a>
            </li>
            {/volist}
        </ul>
    </div>
</div>
<div class="page">
    <ul id="pageLimit" class="pagination"></ul>
</div>
<script type="text/javascript" src="__PUBLIC__phone/js/bootstrap-paginator.js"></script>
{if condition="$shop['last_page'] gt '1'"}
<script>
    $('#pageLimit').bootstrapPaginator({
        currentPage: "<?php echo $shop['current_page']; ?>", //当前的请求页面。
        totalPages: "<?php echo $shop['last_page']; ?>", //一共多少页。
        size:"small", //应该是页眉的大小。
        bootstrapMajorVersion: 3, //bootstrap的版本要求。
        alignment:"right",
        numberOfPages:3,  //一页列出多少数据。
        itemTexts: function (type, page, current) {   //如下的代码是将页眉显示的中文显示我们自定义的中文。
            switch (type) {
                case "first": return "首页";
                case "prev": return "上一页";
                case "next": return "下一页";
                case "last": return "尾页";
                case "page": return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page){  //给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
            var search = "<?php echo $search; ?>";
            window.location.href = '/home/Shop/index?page='+page+search;
        }
    });
</script>
{/if}
</body>
</html>